<script setup>
import { ref, onMounted} from 'vue'

const timeList = ['08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00']

onMounted(() => {
  getNextWeek()
})
const days = ref([])

const getNextWeek = () => {
  // 1、定义当前日期
  const today = new Date()
  // 2、遍历7天后的日期，并格式化
  let cur = 1
  for (let i = 0; i < 7; i++) {
    const futureDate = new Date(today)
    futureDate.setDate(today.getDate() + i)
    const year = futureDate.getFullYear()
    const month = (futureDate.getMonth() + 1).toString().padStart(2, '0')
    const day = futureDate.getDate().toString().padStart(2, '0')
    const week = futureDate.toLocaleDateString('zh-CN', {weekday: 'long'})
    // 填充数组
    days.value.push({
      day: `${year}-${month}-${day}`,
      week,
      current: cur
    })
    cur = 2
  }
}
</script>

<template>
  <div class="time-a">
    <div class="time-b">
      <div :class="[item.current===1 ? 'time-c' : 'time-d']" v-for="(item, index) in days" :key="index"><div class="time-e">{{ item.day }}</div><div class="time-f">{{ item.week }}</div></div>
    </div>
    <div class="time-b">
      <div class="time-g"><div class="time-h time-i"></div><div>当前</div></div>
      <div class="time-g"><div class="time-h time-j"></div><div>已约</div></div>
      <div class="time-g"><div class="time-h time-k"></div><div>空闲</div></div>
      <div class="time-g"><div class="time-h time-l"></div><div>忙碌</div></div>
    </div>
    <div class="time-m">
      <div class="time-n" v-for="tm in timeList" :key="tm">{{ tm }}</div>
    </div>
  </div>
</template>

<style scoped>
.time-a {width: 820px; margin: 0 auto;}
.time-b {display: flex; display: -webkit-flex; justify-content: center;}
.time-c {width: 15%; text-align: center; padding: 5px 0; margin: 10px; background-color: #CCC; border: 1px #CCC solid; border-radius: 5px; cursor: pointer;}
.time-d {width: 15%; text-align: center; padding: 5px 0; margin: 10px; border: 1px #CCC solid; border-radius: 5px; cursor: pointer;}
.time-d:hover {background-color: #CCC;}
.time-e {}
.time-f {}
.time-g {width: 20%; display: inline-flex; display: -webkit-inline-flex; align-items: center; justify-content: center;}
.time-h {width: 30px; height: 20px; margin-right: 10px;}
.time-i {background-color: #0e9be3;}
.time-j {background-color: #de576d;}
.time-k {background-color: #18a058;}
.time-l {background-color: #aaaaaa;}
.time-m {display: flex; display: -webkit-flex; flex-wrap: wrap;}
.time-n {width: 80px; height: 46px; line-height: 46px; text-align: center; margin: 10px; cursor: pointer; background-color: #18a058; color: #FFF; border: 1px #CCC solid; border-radius: 5px;}
.time-n:hover {border: 1px #0e9be3 solid; background-color: #0e9be3; color: #FFF;}
</style>